<template>
  <div id="print">
    <table id="report1" cellSpacing=0 cellPadding=0 style="width:100%;table-layout:fixed;margin:auto;border-collapse:collapse">
      <colgroup>
        <col style="width:80px;"></col>
        <col style="width:90px;"></col>
        <col style="width:40px;"></col>
        <col style="width:100px;"></col>
        <col style="width:40px;"></col>
        <col style="width:60px;"></col>
        <col style="width:60px;"></col>
        <col style="width:60px;"></col>
        <col style="width:80px;"></col>
        <col style="width:60px;"></col>
        <col style="width:100px;"></col>
        <col style="width:100px;"></col>
        <col style="width:60px;"></col>
        <col style="width:60px;"></col>
        <col style="width:100px;"></col>
      </colgroup>
      <tr rn="1" style="height:100px;">
        <td colSpan=15 class="report1_4">资金结算单</td>
      </tr>
      <tr rn="2" style="height:23px;">
        <td colSpan=3 class="report1_2">申请人所属部门</td>
        <td colSpan=5 class="report1_2">{{data.departmentName}}</td>
        <td class="report1_2">编号</td>
        <td colSpan=6 class="report1_2">{{data.reimbursementCode}}</td>
      </tr>
      <tr rn="3" style="height:23px;">
        <td rowSpan=3 class="report1_2">费用所属部门</td>
        <td rowSpan=3 class="report1_2">所属部门/名称</td>
        <td rowSpan=3 class="report1_2">结算类别</td>
        <td rowSpan=3 class="report1_2">费用项目</td>
        <td rowSpan=3 class="report1_2">费用所属期间</td>
        <td colSpan=10 class="report1_2">结算信息</td>
      </tr>
      <tr rn="4" style="height:23px;">
        <td rowSpan=2 class="report1_2">应结算金额</td>
        <td rowSpan=2 class="report1_2">扣款金额</td>
        <td rowSpan=2 class="report1_2">奖励金额</td>
        <td rowSpan=2 class="report1_2">实际结算金额</td>
        <td rowSpan=2 class="report1_2">油卡金额</td>
        <td colSpan=5 class="report1_2">其中银行账户信息</td>
      </tr>
      <tr rn="5" style="height:23px;">
        <td class="report1_2">开户行业名称</td>
        <td class="report1_2">账号</td>
        <td class="report1_2" colSpan=2>户名</td>
        <td class="report1_2">银行卡结算金额</td>
      </tr>
      <tr rn="6" style="height:23px;"
          :key="item.id"
          v-for="item in data.settlementInfoVoList">
        <td class="report1_1">{{departmentFilter(item.bearDepartmentName)}}</td>
        <td class="report1_1">{{departmentFilter(item.departmentName) + '/' + item.reimbursementName}}</td>
        <td class="report1_1">{{item.show_settleCategory}}</td>
        <td class="report1_1">{{item.costItem}}</td>
        <td class="report1_1">{{formatterTime(item.period, 22)}}</td>
        <td class="report1_1">{{SplitK(item.settleAmout)}}</td>
        <td class="report1_1">{{SplitK(item.debitAmout)}}</td>
        <td class="report1_1">{{SplitK(item.rewardAmout)}}</td>
        <td class="report1_1">{{SplitK(item.actualSettleAmout)}}</td>
        <td class="report1_1">{{SplitK(item.oilcardSettleAmout)}}</td>
        <td class="report1_1">{{item.cardBank}}</td>
        <td class="report1_100">{{item.accountNumber}}</td>
        <td class="report1_1" colSpan=2>{{item.accountName}}</td>
        <td class="report1_100">{{SplitK(item.bankCardSettleAmout)}}</td>
      </tr>
      <tr rn="6" style="height:23px;">
        <td class="report1_1" colSpan=5>合计</td>
        <td class="report1_1">{{SplitK(sum.settleAmout)}}</td>
        <td class="report1_1">{{SplitK(sum.debitAmout)}}</td>
        <td class="report1_1">{{SplitK(sum.rewardAmout)}}</td>
        <td class="report1_1">{{SplitK(sum.actualSettleAmout)}}</td>
        <td class="report1_1">{{SplitK(sum.oilcardSettleAmout)}}</td>
        <td class="report1_1" colSpan=4></td>
        <td class="report1_100">{{SplitK(sum.bankCardSettleAmout)}}</td>
      </tr>
      <tr rn="6" style="height:23px;">
        <td class="report1_1" colSpan=5>报销金额合计</td>
        <td class="report1_1" colSpan=4>{{SplitK(sum.sum)}}</td>
        <td class="report1_1" colSpan=2>核实金额（大写）</td>
        <td class="report1_1" colSpan=4>{{sum.sumCap}}</td>
      </tr>
      <tr rn="9" style="height:46px;">
        <td class="report1_7"></td>
        <td class="report1_6">申请人</td>
        <td colSpan=2 class="report1_6">{{data.proposer}}</td>
        <td class="report1_6">业务审核</td>
        <td colSpan=2 class="report1_6">{{data.businessAuditor || '无'}}</td>
        <td class="report1_6">财务审核</td>
        <td colSpan=2 class="report1_6">{{data.financialAuditor || '无'}}</td>
        <td class="report1_6">审批人</td>
        <td colSpan=4 class="report1_8">{{data.approverAuditor || '无'}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
  import Nzh from 'nzh';
  import {SplitK, FormatterTime} from '~/plugins/Tools';
  const css = `
  <style id="report1_style">
    .report1_1 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;line-height:18px;word-break:break-word;}
    .report1_100 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;line-height:18px;white-space:nowrap;overflow:hidden;word-break:keep-all;}
    .report1_2 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:12px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_3 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:none;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_4 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:14px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_5 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:none;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:none;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_6 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_7 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
    .report1_8 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  </style>
`;
  export default {
    data () {
      return {
        a: {},
        css,
      };
    },
    computed: {
      moneyCap: function () {
        if (!this.data) return '';
        return Nzh.cn.toMoney(this.data.money);
      },
      sum: function () {
        let settleAmout = 0;
        let debitAmout = 0;
        let rewardAmout = 0;
        let actualSettleAmout = 0;
        let oilcardSettleAmout = 0;
        let bankCardSettleAmout = 0;
        this.data.settlementInfoVoList.forEach(item => {
          settleAmout += item.settleAmout;
          debitAmout += item.debitAmout;
          rewardAmout += item.rewardAmout;
          actualSettleAmout += item.actualSettleAmout;
          oilcardSettleAmout += item.oilcardSettleAmout;
          bankCardSettleAmout += item.bankCardSettleAmout;
        });
        let sum = oilcardSettleAmout + bankCardSettleAmout;
        return {
          settleAmout,
          debitAmout,
          rewardAmout,
          actualSettleAmout,
          oilcardSettleAmout,
          bankCardSettleAmout,
          sum,
          sumCap: Nzh.cn.toMoney(sum),
        };
      },
    },
    methods: {
      formatterTime: FormatterTime,
      SplitK,
      departmentFilter (departmentName) {
        let department = departmentName.split('/');
        if (department.length < 2) {
          return departmentName;
        }
        department = department.reverse();
        return department[1] + '/' + department[0];
      },
    },
    props: {
      data: {
        type: Object,
        required: true,
      },
    },
  };
</script>
<style id="report1_style">
  .report1_1 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;line-height:18px;word-break:break-word;}
  .report1_100 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;line-height:18px;white-space:nowrap;overflow:hidden;word-break:keep-all;}
  .report1_2 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:12px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_3 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:none;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_4 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:14px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_5 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:none;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:none;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_6 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_7 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:none;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
  .report1_8 { text-align:left;vertical-align:middle;font-family:Dialog;font-size:8px;font-weight:bolder;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:none;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:transparent;word-break:break-word;}
</style>
